<template>
  <div class="upload-page">
    <div class="page-header">
      <h1>文件上传</h1>
      <p>上传图片或视频文件进行智能去水印处理</p>
    </div>

    <!-- 上传区域 -->
    <a-card class="upload-card">
      <a-upload-dragger
        v-model:file-list="fileList"
        :before-upload="beforeUpload"
        :multiple="true"
        :show-upload-list="true"
        :disabled="uploading"
        accept=".jpg,.jpeg,.png,.webp,.mp4,.avi,.mov,.mkv"
        class="upload-dragger"
      >
        <p class="ant-upload-drag-icon">
          <CloudUploadOutlined />
        </p>
        <p class="ant-upload-text">点击或拖拽文件到此区域上传</p>
        <p class="ant-upload-hint">
          支持图片格式：JPG、PNG、WEBP<br>
          支持视频格式：MP4、AVI、MOV、MKV<br>
          单个文件最大：图片 20MB，视频 500MB
        </p>
      </a-upload-dragger>
    </a-card>

    <!-- 上传进度 -->
    <div v-if="uploading" class="upload-progress">
      <a-card title="上传进度">
        <a-progress
          :percent="uploadProgress"
          :status="uploadStatus"
          :format="percentFormat"
        />
        <p class="progress-text">{{ progressText }}</p>
      </a-card>
    </div>

    <!-- 处理设置 -->
    <a-card title="处理设置" class="settings-card">
      <a-form layout="vertical">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="处理模式">
              <a-select v-model:value="settings.mode" placeholder="选择处理模式">
                <a-select-option value="auto">智能模式</a-select-option>
                <a-select-option value="manual">手动模式</a-select-option>
                <a-select-option value="batch">批量模式</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="输出质量">
              <a-select v-model:value="settings.quality" placeholder="选择输出质量">
                <a-select-option value="high">高质量</a-select-option>
                <a-select-option value="medium">中等质量</a-select-option>
                <a-select-option value="low">低质量</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        
        <a-form-item label="处理选项">
          <a-checkbox-group v-model:value="settings.options">
            <a-checkbox value="enhance">图像增强</a-checkbox>
            <a-checkbox value="sharpen">锐化处理</a-checkbox>
            <a-checkbox value="noise">降噪处理</a-checkbox>
          </a-checkbox-group>
        </a-form-item>
      </a-form>
    </a-card>

    <!-- 操作按钮 -->
    <div class="action-buttons">
      <a-button
        type="primary"
        size="large"
        :loading="uploading"
        :disabled="fileList.length === 0"
        @click="startUpload"
      >
        <CloudUploadOutlined />
        开始上传并处理
      </a-button>
      
      <a-button
        size="large"
        @click="clearFiles"
        :disabled="fileList.length === 0"
      >
        清空文件
      </a-button>
    </div>

    <!-- 使用说明 -->
    <a-card title="使用说明" class="help-card">
      <div class="help-content">
        <div class="help-item">
          <h4>支持的文件格式</h4>
          <ul>
            <li><strong>图片：</strong>JPG、JPEG、PNG、WEBP</li>
            <li><strong>视频：</strong>MP4、AVI、MOV、MKV</li>
          </ul>
        </div>
        
        <div class="help-item">
          <h4>文件大小限制</h4>
          <ul>
            <li><strong>图片：</strong>最大 20MB</li>
            <li><strong>视频：</strong>最大 500MB</li>
          </ul>
        </div>
        
        <div class="help-item">
          <h4>处理时间</h4>
          <ul>
            <li><strong>图片：</strong>通常 10-30 秒</li>
            <li><strong>视频：</strong>根据时长，通常 1-10 分钟</li>
          </ul>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { message } from 'ant-design-vue'
import { CloudUploadOutlined } from '@ant-design/icons-vue'

const fileList = ref([])
const uploading = ref(false)
const uploadProgress = ref(0)
const uploadStatus = ref('active')
const progressText = ref('准备上传...')

const settings = reactive({
  mode: 'auto',
  quality: 'high',
  options: ['enhance']
})

const beforeUpload = (file) => {
  const isImage = file.type.startsWith('image/')
  const isVideo = file.type.startsWith('video/')
  
  if (!isImage && !isVideo) {
    message.error('只支持图片和视频文件！')
    return false
  }
  
  const maxSize = isImage ? 20 * 1024 * 1024 : 500 * 1024 * 1024 // 20MB for images, 500MB for videos
  
  if (file.size > maxSize) {
    message.error(`文件大小不能超过 ${isImage ? '20MB' : '500MB'}！`)
    return false
  }
  
  return false // 阻止自动上传，手动控制
}

const percentFormat = (percent) => {
  return `${Math.round(percent)}%`
}

const startUpload = async () => {
  if (fileList.value.length === 0) {
    message.warning('请先选择要上传的文件')
    return
  }
  
  uploading.value = true
  uploadProgress.value = 0
  uploadStatus.value = 'active'
  progressText.value = '正在上传文件...'
  
  try {
    // 模拟上传进度
    for (let i = 0; i <= 100; i += 10) {
      await new Promise(resolve => setTimeout(resolve, 200))
      uploadProgress.value = i
      progressText.value = `上传进度：${i}%`
    }
    
    uploadStatus.value = 'success'
    progressText.value = '上传完成，正在处理...'
    
    message.success('文件上传成功，正在处理中...')
    
    // 这里应该调用后端API进行实际的上传和处理
    // const formData = new FormData()
    // fileList.value.forEach(file => {
    //   formData.append('files', file.originFileObj)
    // })
    // formData.append('settings', JSON.stringify(settings))
    // 
    // const response = await api.post('/upload/batch', formData)
    
  } catch (error) {
    uploadStatus.value = 'exception'
    progressText.value = '上传失败'
    message.error('上传失败，请重试')
  } finally {
    uploading.value = false
  }
}

const clearFiles = () => {
  fileList.value = []
  message.success('已清空文件列表')
}
</script>

<style scoped>
.upload-page {
  max-width: 800px;
}

.page-header {
  margin-bottom: 32px;
}

.page-header h1 {
  font-size: 28px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.page-header p {
  color: #666;
  margin: 0;
}

.upload-card {
  margin-bottom: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.upload-dragger {
  padding: 40px;
}

.upload-progress {
  margin-bottom: 24px;
}

.progress-text {
  margin-top: 16px;
  text-align: center;
  color: #666;
}

.settings-card {
  margin-bottom: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.action-buttons {
  display: flex;
  gap: 16px;
  margin-bottom: 32px;
  justify-content: center;
}

.help-card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.help-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
}

.help-item h4 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
}

.help-item ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.help-item li {
  color: #666;
  margin-bottom: 8px;
  padding-left: 16px;
  position: relative;
}

.help-item li::before {
  content: '•';
  color: #1890ff;
  position: absolute;
  left: 0;
}

@media (max-width: 768px) {
  .action-buttons {
    flex-direction: column;
  }
  
  .help-content {
    grid-template-columns: 1fr;
  }
}
</style> 